<template>

    <!--搜索键盘-->
    <div>
        <el-dialog class="check-keyboard-dialog" width="1000" v-model="visible" :title="title" @opened="dialogOpened">
            <slot></slot>

            <div class="flex">
                
                <slot name="right">
                    <div ></div>
                </slot>
                <div id="check-keyboard"  :class="keyboardContainerClass">

</div>
            </div>
            <!-- <template #footer>
                <el-button size="large" type="warning">重盘</el-button>
                <el-button size="large" type="success">盘平</el-button>
                <el-button size="large" type="primary">保存</el-button>
            </template> -->
        </el-dialog>

    </div>


</template>
<script setup lang='ts'>
// @ts-nocheck
import { ref, watch, nextTick, onBeforeUnmount } from 'vue'

import Keyboard from 'simple-keyboard'
import 'simple-keyboard/build/css/index.css'


const props = withDefaults(defineProps<{ modelValue: boolean, title?: string, keyboardContainerClass: string, defaultValue?: string,isShowPoint?:boolean }>(), {
    title: '请输入商品名称首字母搜索', defaultValue: '',isShowPoint:true
})

const emit = defineEmits(['onChange', 'onKeyPress', 'update:modelValue', 'onSubmit'])
const visible = ref(props.modelValue)
let keyboard: any = null


function setKeyboardInput(val){
    keyboard && keyboard.setInput(val)
}
defineExpose({setKeyboardInput})

function dialogOpened() { //Dialog 打开动画结束时的回调
    console.log('oepn~')
    initKeyboard()
    //设置初始值
    keyboard && keyboard.setInput(props.defaultValue)
}
watch(() => props.modelValue, (newVal) => {
    visible.value = newVal
    if (!newVal) {
        keyboard.clearInput()

        if (keyboard) {
            keyboard.destroy();
            keyboard = null
            console.log(keyboard)

        }
    }

})
watch(() => visible.value, (newVal) => {
    emit('update:modelValue', newVal)
})


const onKeyPress = (button) => {
    let input = keyboard.getInput()
    // if (button === '{bksp}') { //回退 不需要单独设置keyboard 的input值  会自动执行onChange 方法
    //     // const currentInput = input;
    //     // console.log(currentInput)
    //     // keyboard.setInput((currentInput + '').slice(0, -1))
    //     // console.log((currentInput + '').slice(0, -1))
    //     console.log(keyboard.getInput())
    // }
    if (button === '{clear}') {//清空
        keyboard.setInput('')
    }
    if (button === '{confirm}') {//确认
        emit('update:modelValue', false)
    }
    emit('onKeyPress', button)
}
const onChange = (input) => {
    // console.log('onchange~', input)
    let filterInput
    if (input.includes('.')) {
        // 确保只有一个小数点
        filterInput = input.split('.')[0] + '.' + input.split('.')[1]
        keyboard.setInput(filterInput)
       
    }else{
        filterInput = input
       
    }
    
    emit('onChange', filterInput)
   

   

}


//组件解绑之前 销毁keyboard实例，避免内存泄漏
onBeforeUnmount(() => {
    // console.log('onBeforeUnmount')
    if (keyboard) {
        keyboard.destroy();
        keyboard = null
    }
})

//初始化keyboard
function initKeyboard() {

    let defaultLayout = [
        '1 2 3',
        '4 5 6',
        '7 8 9',
        '. 0 {bksp}',
        '{cp} {pp} {bc}'
        // '{clear} {confirm}'

    ]
    if(!props.isShowPoint){
        defaultLayout = [
        '1 2 3',
        '4 5 6',
        '7 8 9',
        '0 {bksp}',
        '{cp} {pp} {bc}'
        // '{clear} {confirm}'

    ]
    }

    // console.log(defaultLayout)
    const options = {
        onChange,
        onKeyPress,
        layout: {
            default: defaultLayout,
        },
        display: {
            '{bksp}': '回退',
            '{clear}': '清空',
            '{confirm}': '完成',
            '{cp}':'重盘',
            '{pp}':'盘平',
            '{bc}':'保存',

        },


    }

    keyboard = new Keyboard(`${props.keyboardContainerClass}`, options)
}





</script>

<style lang='scss' scoped>
:deep(.check-keyboard-dialog) {
    // position: absolute !important;
    // // right: 13px !important;
    // top: 20px;
    // margin: 0 !important;
    // --el-dialog-width: calc(70% - 25px);
}

#check-keyboard {
    :deep(.hg-button-bksp) {
        width: 20px;
        font-weight: bold !important;
        color: #fff;
        background-color: var(--el-color-danger);
    }
    :deep(.hg-button-cp) {
        width: 20px;
        font-weight: bold !important;
        color: #fff;
        background-color: var(--el-color-warning);
    }
    :deep(.hg-button-pp) {
        width: 20px;
        font-weight: bold !important;
        color: #fff;
        background-color: var(--el-color-success);
    }
    :deep(.hg-button-bc) {
        width: 20px;
        font-weight: bold !important;
        color: #fff;
        background-color: var(--el-color-primary);
    }

    :deep(.hg-rows){
        height: 100%;
        .hg-row{
            height: 19%;
            box-sizing: border-box;
        }
    }
    
    :deep(.hg-button-confirm) {
        min-width: 30%;

        font-weight: bold !important;
        color: #fff;
        background-color: var(--el-color-primary);
    }

    :deep(.hg-button) {
        padding: 25px 5px;
        font-size: 20px;
        height: 100%;
        box-sizing: border-box;
    }

}
.flex{
    display: flex;
    &>div{
        flex: 1;
    }
   
}
</style>
